<template>
  <v-app>
    <v-sheet class="pt-[78px] mb-6">
      <Swiper :data-list="product.imgurl" />
    </v-sheet>
    <v-sheet color="transparent" class="w-[90%] mx-auto pt-[30px] pb-12">
      <!-- 面包屑导航 -->
      <!-- <v-row class="mb-4 px-2">
        <v-col cols="12">
          <v-breadcrumbs :items="breadcrumbs" class="text-sm text-gray-600">
            <template v-slot:item="{ item }">
              <v-breadcrumbs-item
                :href="item.href"
                class="hover:text-primary transition-colors"
              >
                {{ item.text }}
              </v-breadcrumbs-item>
            </template>
          </v-breadcrumbs>
        </v-col>
      </v-row> -->
      <!-- <v-row class="mb-6 px-2">
        <v-col cols="12">
          <v-sheet
            color="white"
            class="rounded-xl shadow-md overflow-hidden position-relative"
          >
            <v-carousel
              v-model="carouselActive"
              :height="isMobile ? 300 : 500"
              show-arrows="hover"
              cycle
              hide-delimiter-background
            >
              <v-carousel-item
                v-for="(slide, imgIndex) in product.imgurl"
                :key="imgIndex"
              >
                <v-sheet color="#f5f5f5" height="100%">
                  <v-img
                    :src="slide.url"
                    :alt="`${product.name} - 图片 ${imgIndex + 1}`"
                    contain
                    class="w-full h-full object-cover"
                  ></v-img>
                </v-sheet>
              </v-carousel-item>
            </v-carousel>
          </v-sheet>
        </v-col>
      </v-row> -->
      <v-row class="mb-6 px-2">
        <v-col md="8" cols="12" class="mb-4 md:mb-0">
          <v-sheet color="white" class="rounded-xl shadow-md h-full">
            <h1 class="text-2xl md:text-3xl font-bold mb-3 text-gray-800 mb-12">
              {{ product.name }}
            </h1>

            <!-- <div class="flex items-center mb-4">
              <v-rating
                :value="product.rating"
                readonly
                color="amber"
                background-color="amber-lighten4"
                class="mr-2"
              ></v-rating>
              <span class="text-sm text-gray-600"
                >{{ product.reviews }} 条评价</span
              >
              <span class="mx-2 text-gray-400">•</span>
              <span class="text-sm text-green-600 font-medium">
                <v-icon small class="mr-1">mdi-check-circle</v-icon>有货
              </span>
            </div> -->

            <p class="text-gray-700 mb-6">
              <span>
                Piece Weight:
                <span class="text-2xl ml-2">{{ product.desc }}+ </span>
              </span>
            </p>

            <div class="mb-8">
              <span class="mr-6">
                Subtotal:
                <span class="text-3xl font-bold text-primary ml-2">
                  USD {{ product.price }}+
                </span>
              </span>

              <span v-if="product.oldPrice && product.oldPrice !== product.price && product.oldPrice > 0">
                Original Price:
                <span class="text-3xl font-400 ml-2" style="text-decoration:line-through;color: #999;">
                  USD {{ product.oldPrice }}+
                </span>
              </span>

              <!-- <span
                v-if="product.originalPrice"
                class="ml-2 text-gray-500 line-through"
                >USD {{ product.originalPrice }}</span
              > -->
            </div>

            <!-- 商品分类 -->
            <!-- <div class="mb-8">
              <v-chip-group>
                <v-chip
                  v-for="(item, clsIndex) in productClassifyData"
                  :key="'cls-' + clsIndex"
                >
                  {{ item.name }}
                </v-chip>
              </v-chip-group>
            </div> -->

            <p class="text-gray-700 mb-10" v-html="product.content"></p>

            <div class="flex flex-wrap gap-4">
              <!-- <v-btn color="primary" size="large" class="text-white px-8">
                <v-icon left>mdi-cart-plus</v-icon>
                加入购物车
              </v-btn> -->
              <!-- <v-btn
                color="secondary"
                size="large"
                class="text-white px-8"
                @click="buyNow"
              >
                <v-icon left>mdi-truck</v-icon>
                立即购买
              </v-btn> -->
            </div>
          </v-sheet>
        </v-col>

        <!-- 侧边信息卡 -->
        <!-- <v-col md="4" cols="12">
          <v-sheet color="white" class="p-5 rounded-xl shadow-md">
            <div class="space-y-4">
              <div class="flex items-start">
                <v-icon color="primary" class="mt-1 mr-3"
                  >mdi-truck-fast</v-icon
                >
                <div>
                  <h3 class="font-medium">配送信息</h3>
                  <p class="text-sm text-gray-600">
                    满¥99免运费，预计3-5天送达
                  </p>
                </div>
              </div>

              <div class="flex items-start">
                <v-icon color="primary" class="mt-1 mr-3">mdi-refresh</v-icon>
                <div>
                  <h3 class="font-medium">退换政策</h3>
                  <p class="text-sm text-gray-600">30天内可退换，原装未拆封</p>
                </div>
              </div>

              <div class="flex items-start">
                <v-icon color="primary" class="mt-1 mr-3"
                  >mdi-shield-check</v-icon
                >
                <div>
                  <h3 class="font-medium">正品保障</h3>
                  <p class="text-sm text-gray-600">原装正品，假一赔十</p>
                </div>
              </div>

              <div class="flex items-start">
                <v-icon color="primary" class="mt-1 mr-3"
                  >mdi-headphones</v-icon
                >
                <div>
                  <h3 class="font-medium">客服支持</h3>
                  <p class="text-sm text-gray-600">
                    工作日 9:00-18:00 在线咨询
                  </p>
                </div>
              </div>
            </div>
          </v-sheet>
        </v-col> -->
      </v-row>

      <!-- 内容主体标签页 -->
      <v-row class="mb-8 px-2">
        <v-col cols="12">
          <v-sheet
            color="white"
            class="rounded-xl shadow-md overflow-hidden pb-8"
          >
            <v-tabs v-model="contentTab" show-arrows class="bg-gray-50">
              <v-tab value="overview" class="text-capitalize font-medium">
                <v-icon left class="mr-2">mdi-eye</v-icon>Overview
              </v-tab>
              <v-tab value="specs" class="text-capitalize font-medium">
                <v-icon left class="mr-2">mdi-cube-outline</v-icon>Specs
              </v-tab>
              <!-- <v-tab value="tech" class="text-capitalize font-medium">
                <v-icon left class="mr-2">mdi-call-split</v-icon>Tech
              </v-tab> -->
              <v-tab value="warranty" class="text-capitalize font-medium">
                <v-icon left class="mr-2">mdi-shield</v-icon>Warranty
              </v-tab>
              <v-tab value="in-the-box" class="text-capitalize font-medium">
                <v-icon left class="mr-2">mdi-package-variant</v-icon>In The Box
              </v-tab>
            </v-tabs>

            <v-tabs-window v-model="contentTab" class="p-12">
              <v-tabs-window-item value="overview">
                <div class="space-y-6 p-4" v-html="product.overview"></div>
              </v-tabs-window-item>

              <v-tabs-window-item value="specs">
                <div class="space-y-6 p-4" v-html="product.specs"></div>
              </v-tabs-window-item>

              <!-- <v-tabs-window-item value="tech">
                <div class="space-y-6 p-4" v-html="product.tech"></div>
              </v-tabs-window-item> -->

              <v-tabs-window-item value="warranty">
                <div class="space-y-6 p-4" v-html="product.warranty"></div>
              </v-tabs-window-item>

              <v-tabs-window-item value="in-the-box">
                <div class="space-y-6 p-4" v-html="product.inTheBox"></div>
              </v-tabs-window-item>
            </v-tabs-window>
          </v-sheet>
        </v-col>
      </v-row>
    </v-sheet>
    <v-sheet color="#f9f9f9">
      <h1
        class="py-16 text-center font-buttershine-serif text-[#333] text-3xl lg:text-4xl"
      >
        Related Products
      </h1>
      <div class="w-[90%] mx-auto d-flex justify-center pb-16">
        <v-sheet color="transparent">
          <v-row>
            <product-card
              v-for="(product, index) in relatedProductData"
              :key="index"
              :product="product"
              :col="3"
            />
          </v-row>
        </v-sheet>
      </div>
    </v-sheet>
  </v-app>
</template>

<script setup lang="ts">
import Swiper from "@/components/swiper.vue";
import ProductCard from "@/pages/products/product-card.vue";
import { onMounted, ref } from "vue";
const { locale, setLocale, tm } = useI18n();

const isMobile = ref<boolean>(false);
const carouselActive = ref<number>(0);
const contentTab = ref<string>("overview");

const route = useRoute();

const { $axios } = useNuxtApp();

// 商品详情
const product = ref<any>({});
const getProductDetail = async () => {
  const { id } = route.query;
  const { isSuccess, data } = await $axios.get(`/getProductDetail?pid=${id}`);
  if (isSuccess) {
    product.value = data;
    console.log("获取数据成功 => ", product.value);
    // getProductClassify();
    getRelatedProduct();
    // SEO 会根据中英文切换做不同的SEO
    useSeoMeta({
      keywords: product.value.seoKeywords || tm("shop.seo.keywords"),
      title: product.value.name,
      ogTitle: product.value.name,
      description: product.value.desc,
      ogDescription: product.value.desc,
      ogImage: product.value.cover
    })
  }
};

// 获取商品分类
const productClassifyData = ref<any[]>([]);

const getProductClassify = async () => {
  const { code, data } = await $axios.get(
    `/getClassifyList?page=1&pageSize=30000`
  );
  if (code === "200") {
    const { cid } = product.value;
    const classifyList = data.dataList.filter((item: any) =>
      cid.includes(item.cid)
    );
    productClassifyData.value = classifyList;
    console.log("获取数据成功 => ", productClassifyData.value);
  }
};

// 获取关联商品
const relatedProductData = ref<any[]>([]);

const getRelatedProduct = async () => {
  const { code, data } = await $axios.get(
    `/getRelatedProductsList?page=1&pageSize=4&cid=${product.value.cid}`
  );
  if (code === "200") {
    relatedProductData.value = data.dataList.filter((item: any) => item.pid !== product.value.pid);
    console.log("获取数据成功 => ", relatedProductData.value);
  }
};

onMounted(() => {
  isMobile.value = window.innerWidth <= 768;
  getProductDetail();
});

</script>

<style scoped>
</style>